இணைய செயல்திறனைத் திறத்தல்: சுயவிவரம் மற்றும் பகுப்பாய்விற்கான CSS @profile பற்றிய ஒரு ஆழமான பார்வை

வேகமான, அதிக பதிலளிக்கக்கூடிய இணையப் பயன்பாடுகளை உருவாக்கும் இடைவிடாத முயற்சியில், டெவலப்பர்களுக்கு சக்திவாய்ந்த கருவிகளின் ஒரு ஆயுதக்கிடங்கு உள்ளது. உலாவி டெவலப்பர் கருவிகளின் சிக்கலான ஃபிளேம் வரைபடங்கள் முதல் அதிநவீன உண்மையான பயனர் கண்காணிப்பு (RUM) தளங்கள் வரை, நமது பயன்பாட்டின் வாழ்க்கைச் சுழற்சியின் ஒவ்வொரு அம்சத்தையும் நம்மால் அளவிட முடியும். ஆனாலும், ஒரு தொடர்ச்சியான இடைவெளி இருந்து வருகிறது: நமது ஸ்டைல்ஷீட்களிலிருந்து நேரடியாக குறிப்பிட்ட UI கூறுகளின் ரெண்டரிங் செயல்திறனை அளவிடுவதற்கான ஒரு எளிய, அறிவிப்பு வழி. இங்கே வருகிறது CSS @profile, இது ஒரு சோதனை முயற்சியாக இருந்தாலும், முன்-இறுதி செயல்திறன் பகுப்பாய்வை நாம் அணுகும் முறையை மாற்றவிருக்கும் ஒரு புரட்சிகரமான முன்மொழிவு.

இந்த விரிவான வழிகாட்டி உங்களை CSS @profile உலகிற்குள் ஒரு ஆழமான பயணத்திற்கு அழைத்துச் செல்லும். அது என்ன, அது தீர்க்கும் முக்கியமான பிரச்சனைகள், அதன் தொடரியல், மற்றும் முன்னோடியில்லாத துல்லியத்துடன் செயல்திறன் தடைகளை கண்டறிந்து சரிசெய்ய அதை எவ்வாறு பயன்படுத்தலாம் என்பதை நாம் ஆராய்வோம். நீங்கள் ஒரு அனுபவமிக்க செயல்திறன் பொறியாளராக இருந்தாலும் சரி அல்லது பயனர் அனுபவத்தில் ஆர்வமுள்ள ஒரு முன்-இறுதி டெவலப்பராக இருந்தாலும் சரி, @profile-ஐப் புரிந்துகொள்வது அடுத்த தலைமுறை இணைய செயல்திறன் கருவிகளுக்குத் தயாராவதற்கான திறவுகோலாகும்.

CSS @profile என்றால் என்ன?

அதன் மையத்தில், CSS @profile என்பது செயல்திறன் சுயவிவரத்திற்காக குறைந்த மேல்நிலை, அறிவிப்பு வழிமுறையை வழங்க வடிவமைக்கப்பட்ட ஒரு முன்மொழியப்பட்ட CSS at-rule ஆகும். இது ஒரு பக்கத்தில் உள்ள கூறுகளின் நிலைக்கு நேரடியாக இணைக்கப்பட்ட தனிப்பயன் அளவீட்டு இடைவெளிகளை வரையறுக்க டெவலப்பர்களை அனுமதிக்கிறது. இதை உலாவிக்குச் சொல்வது போல நினைத்துப் பாருங்கள், "தயவுசெய்து இந்த கூறு ரெண்டர் செய்யத் தொடங்கும் போது ஒரு டைமரைத் தொடங்கி, அது முடிந்ததும் அதை நிறுத்தி, பின்னர் எனக்கு முடிவைக் காட்டுங்கள்."

இந்த முன்மொழிவு பரந்த CSS Toggles Level 1 விவரக்குறிப்பின் ஒரு பகுதியாகும், இது ஜாவாஸ்கிரிப்டை நம்பாமல் CSS க்குள் நிலையை நிர்வகிப்பதற்கான ஒரு வழியை அறிமுகப்படுத்துகிறது. @profile விதி இந்த நிலை-அறியும் திறனைப் பயன்படுத்தி துல்லியமான செயல்திறன் குறிகளையும் அளவீடுகளையும் உருவாக்குகிறது, அவை பின்னர் ஜாவாஸ்கிரிப்ட் செயல்திறன் API உடன் உருவாக்கப்பட்ட உள்ளீடுகளைப் போலவே உலாவியின் செயல்திறன் காலவரிசையில் தோன்றும்.

CSS @profile-இன் முக்கிய பண்புகள் பின்வருமாறு:

• அறிவிப்பு முறை (Declarative): நீங்கள் எதை அளவிட விரும்புகிறீர்கள் என்பதை உங்கள் CSS-ல் நேரடியாக வரையறுக்கிறீர்கள், செயல்திறன் கருவிகளை ஸ்டைல்களுடன் இணைத்து விடுகிறீர்கள். இது செயல்திறன் பகுப்பாய்வை மேம்பாட்டு பணிப்பாய்வின் ஒரு ஒருங்கிணைந்த பகுதியாக ஆக்குகிறது.
• கூறு-சார்ந்தது (Component-Scoped): இது React, Vue, Svelte, மற்றும் Angular போன்ற கட்டமைப்புகளின் நவீன, கூறு-அடிப்படையிலான கட்டமைப்பிற்கு மிகவும் பொருத்தமானது. ஒரு சிக்கலான UI-இல் ஒரு குறிப்பிட்ட கூறுகளை நீங்கள் தனிமைப்படுத்தி சுயவிவரப்படுத்தலாம்.
• குறைந்த மேல்நிலை (Low-Overhead): இது CSS-ல் செயல்படுத்தப்பட்ட ஒரு நேட்டிவ் உலாவி அம்சம் என்பதால், இது மிகவும் திறமையானதாக வடிவமைக்கப்பட்டுள்ளது, அளவீட்டுக் கருவியே அது அளவிட வேண்டிய செயல்திறனைப் பாதிக்கும் அபாயத்தைக் குறைக்கிறது (இது பார்வையாளர் விளைவு என அழைக்கப்படுகிறது).
• DevTools உடன் ஒருங்கிணைக்கப்பட்டது: @profile மூலம் உருவாக்கப்பட்ட அளவீடுகள் பயனர் நேர API உடன் தடையின்றி ஒருங்கிணைக்கப்பட்டு, உலாவி டெவலப்பர் கருவிகளின் செயல்திறன் பேனலில் தோன்றும் வகையில் வடிவமைக்கப்பட்டுள்ளன, இது பகுப்பாய்விற்கு ஒரு பழக்கமான சூழலை வழங்குகிறது.

நமக்கு ஏன் CSS-நேட்டிவ் சுயவிவரக் கருவி தேவை?

@profile-இன் மதிப்பை உண்மையாகப் பாராட்ட, நவீன இணைய மேம்பாட்டின் பின்னணியில் ரெண்டரிங் செயல்திறனை அளவிடுவதில் நமது தற்போதைய கருவிகளின் வரம்புகளை நாம் முதலில் புரிந்து கொள்ள வேண்டும்.

சுருக்கத்தின் சிக்கல் (The Problem of Abstraction)

கூறு கட்டமைப்புகள் மற்றும் CSS-in-JS நூலகங்கள் முன்-இறுதி மேம்பாட்டில் புரட்சியை ஏற்படுத்தியுள்ளன, இது இணையற்ற டெவலப்பர் அனுபவத்தையும் அளவிடுதலையும் வழங்குகிறது. இருப்பினும், இந்த சக்திவாய்ந்த சுருக்கம் சில சமயங்களில் செயல்திறன் செலவுகளை மறைத்துவிடக்கூடும். ஒரு React கூறில் ஒரு எளிய நிலை மாற்றம் மறு-ரெண்டர்களின் ஒரு அடுக்கைத் தூண்டலாம், சிக்கலான ஸ்டைல் மறு கணக்கீடுகள் மற்றும் லேஅவுட் மாற்றங்கள் ஏற்படலாம். இந்த சிக்கலான நிகழ்வுகளின் சங்கிலிக்குள் ஜாங்க் அல்லது மெதுவான ரெண்டரின் சரியான மூலத்தைக் கண்டறிவது ஒரு குறிப்பிடத்தக்க சவாலாக இருக்கலாம்.

ஜாவாஸ்கிரிப்ட்-அடிப்படையிலான சுயவிவரத்தின் வரம்புகள்

தனிப்பயன் செயல்திறன் அளவீடுகளை உருவாக்குவதற்கான நிலையான வழி ஜாவாஸ்கிரிப்ட் செயல்திறன் API மூலம் ஆகும்:

performance.mark('my-component-start');
// ... component renders ...
performance.mark('my-component-end');
performance.measure('My Component Render', 'my-component-start', 'my-component-end');

இது நம்பமுடியாத அளவிற்கு பயனுள்ள ஒரு நுட்பம், ஆனால் அதற்கும் சில குறைபாடுகள் உள்ளன:

• இது ஜாவாஸ்கிரிப்ட் செயல்பாட்டை மட்டுமே அளவிடுகிறது: இந்த அளவீட்டின் காலம் ஜாவாஸ்கிரிப்ட் இயங்க எவ்வளவு நேரம் எடுத்தது என்பதைக் கூறுகிறது, ஆனால் அது முழுமையான சித்திரத்தைக் கொடுக்காது. அது உலாவியின் அடுத்தடுத்த மற்றும் பெரும்பாலும் செலவு மிகுந்த வேலைகளைத் தவறவிடுகிறது: ஸ்டைல் கணக்கீடு, லேஅவுட், பெயிண்ட் மற்றும் காம்போசிட் லேயர்கள். ஒரு கூறின் ஜாவாஸ்கிரிப்ட் வேகமாக இருக்கலாம், ஆனால் அதன் CSS மிகவும் மெதுவான ரெண்டரைத் தூண்டக்கூடும்.
• இது பாய்லர்பிளேட்டைச் சேர்க்கிறது: ஒவ்வொரு கூறுக்கும் செயல்திறன் குறிகளைச் சேர்ப்பது குறியீட்டைச் சிதறடித்து, கூறின் முக்கிய தர்க்கம் மற்றும் ஸ்டைலிங்கிலிருந்து தனித்து இருப்பதாக உணர வைக்கிறது.
• ஒத்திசைவு சவால்கள்: `performance.mark('end')` அழைப்பைத் துல்லியமாக வைப்பது கடினமாக இருக்கலாம். அது ஜாவாஸ்கிரிப்ட் இயங்கிய பிறகு இருக்க வேண்டுமா? அல்லது அடுத்த உலாவி ஃபிரேம் பெயிண்ட் செய்யப்பட்ட பிறகு இருக்க வேண்டுமா? இந்த நேரத்தை சரியாகப் பெறுவது சிக்கலானது.

DevTools கற்றல் வளைவு

Chrome, Firefox, மற்றும் Edge DevTools-இல் உள்ள செயல்திறன் பேனல் செயல்திறன் பகுப்பாய்விற்கான இறுதி உண்மையின் மூலமாகும். அதன் ஃபிளேம் வரைபடங்கள் உலாவி செய்யும் ஒவ்வொரு செயலையும் காட்சிப்படுத்துகின்றன. இருப்பினும், பல டெவலப்பர்களுக்கு, இது அதிகப்படியான சிக்கலான ஒரு கருவியாகும். ஒரு அடர்த்தியான ஃபிளேம் வரைபடத்தில் ஒரு குறிப்பிட்ட ஊதா பட்டை (ரெண்டரிங்) அல்லது பச்சை பட்டையை (பெயிண்டிங்) ஒரு குறிப்பிட்ட வரி CSS அல்லது ஒரு UI கூறுடன் தொடர்புபடுத்துவது குறிப்பிடத்தக்க நேரத்தையும் நிபுணத்துவத்தையும் வளர்க்க வேண்டிய ஒரு திறமையாகும். "எனது `` கூறு இந்த கடைசி புதுப்பிப்பில் ரெண்டர் செய்ய எவ்வளவு செலவானது?" என்ற எளிய கேள்விக்கு பதிலளிப்பது பெரும்பாலும் கடினம்.

CSS @profile இந்த உலகங்களை இணைக்கும் பாலம். இது ஜாவாஸ்கிரிப்ட் செயல்திறன் API-இன் கூறு-நிலை கவனத்தை வழங்குகிறது, ஆனால் ஆழமான உலாவி அளவீடுகளின் ரெண்டரிங்-அறியும் துல்லியத்துடன், அனைத்தும் ஒரு எளிய, அறிவிப்பு CSS தொடரியலில் இணைக்கப்பட்டுள்ளது.

@profile-இன் தொடரியல் மற்றும் கட்டமைப்பு

ஒரு சோதனை அம்சமாக, @profile-இன் சரியான தொடரியல் தரப்படுத்தல் செயல்முறையின் மூலம் நகரும்போது மாற்றத்திற்கு உட்பட்டது. இருப்பினும், தற்போதைய CSS டோகிள்கள் முன்மொழிவின் அடிப்படையில், அதன் சாத்தியமான கட்டமைப்பை நாம் ஆராயலாம்.

at-rule ஒரு தனிப்பயன் அடையாளங்காட்டியுடன் வரையறுக்கப்படுகிறது, இது செயல்திறன் காலவரிசையில் தோன்றும் அளவீட்டின் பெயராக இருக்கும்.

            
@profile <profile-name> {
  /* ... rules ... */
}

            

              
                Copy
              
            
          

விதித் தொகுதிக்குள் தான் மேஜிக் நடக்கிறது. சுயவிவரத்தை ஒரு CSS டோகிளுடன் இணைப்பதே முக்கியமாகும். ஒரு CSS டோகிள் என்பது ஒரு கூறு இருக்கக்கூடிய ஒரு தனிப்பயன் நிலையாகும், இது கிளிக்குகள் போன்ற பல்வேறு தூண்டுதல்களால் அல்லது இந்த விஷயத்தில், DOM-உடன் இணைக்கப்படுவதன் மூலம் செயல்படுத்தப்படலாம்.

ஒரு பொதுவான செயல்படுத்தல் இப்படி இருக்கலாம்:

            
/* This defines a toggle named 'user-card-toggle' */
@toggle user-card-toggle {
  values: inactive, active;
  /* Becomes active when a .user-card element exists */
  activate-at: .user-card;
}

/* This links a performance profile to the toggle */
@profile UserCard_RenderTime {
  /* The measurement is tied to the lifecycle of this toggle */
  toggle-trigger: user-card-toggle;
}

            

              
                Copy
              
            
          

இதை உடைத்துப் பார்ப்போம்:

• @toggle user-card-toggle: முதலில் நாம் ஒரு டோகிளை வரையறுக்கிறோம். இது CSS-க்குள் ஒரு பெயரிடப்பட்ட நிலை இயந்திரத்தை உருவாக்கும் ஒரு புதிய கருத்து.
• activate-at: .user-card;: இது தான் தூண்டுதல். இது .user-card செலக்டருடன் பொருந்தக்கூடிய ஒரு கூறு DOM-இல் இருக்கும்போதெல்லாம், user-card-toggle 'செயலில்' இருப்பதாகக் கருதப்பட வேண்டும் என்று உலாவிக்குச் சொல்கிறது. கடைசி .user-card கூறு அகற்றப்படும்போது, அது 'செயலற்றதாக' மாறும்.
• @profile UserCard_RenderTime: நாம் நமது செயல்திறன் சுயவிவரத்தை வரையறுக்கிறோம், அதற்கு DevTools-இல் நாம் தேடக்கூடிய ஒரு விளக்கமான பெயரை அளிக்கிறோம்.
• toggle-trigger: user-card-toggle;: இது தான் முக்கியமான இணைப்பு. இது user-card-toggle செயலில் வரும்போது ஒரு செயல்திறன் அளவீட்டைத் தொடங்கி, அது செயலற்றதாக மாறும்போது அளவீட்டை முடிக்க உலாவிக்கு அறிவுறுத்துகிறது.

உலாவி இதைச் செயல்படுத்தும்போது, அது பயனுள்ள வகையில் பயனர் நேர API அழைப்புகளாக மாற்றுகிறது. ஒரு .user-card கூறு ரெண்டர் செய்யப்பட்டு டோகிள் செயலில் மாறும் தருணத்தில், உலாவி மறைமுகமாக ஒரு performance.mark('UserCard_RenderTime:start') செய்கிறது. அந்த கூறு முழுமையாக ஸ்டைல் செய்யப்பட்டு, லேஅவுட் செய்யப்பட்டு, மற்றும் பெயிண்ட் செய்யப்பட்டதும், உலாவி அளவீட்டை முடிக்க முடியும், இதன் விளைவாக காலவரிசையில் ஒரு performance.measure('UserCard_RenderTime') உள்ளீடு உருவாகும். சரியான தொடக்க மற்றும் முடிவு புள்ளிகள் (எ.கா., ஸ்டைல் கணக்கீடு மற்றும் பெயிண்ட்) நிலைத்தன்மையை உறுதி செய்வதற்காக விவரக்குறிப்பால் வரையறுக்கப்படும்.

CSS @profile-ஐ நடைமுறையில் பயன்படுத்துவது எப்படி: ஒரு படிப்படியான வழிகாட்டி

இன்று நீங்கள் உற்பத்தி உலாவி களில் @profile-ஐப் பயன்படுத்த முடியாது என்றாலும், நாம் எதிர்பார்க்கப்படும் பணிப்பாய்வு மூலம் செல்லலாம். இது கிடைத்தவுடன் உங்கள் மேம்பாட்டுச் செயல்பாட்டில் அது எவ்வாறு பொருந்தும் என்பதைப் புரிந்துகொள்ள இது உதவும்.

முக்கிய குறிப்பு: இதை எழுதும் நேரத்தில், CSS @profile ஒரு சோதனை முன்மொழிவு மற்றும் எந்த நிலையான உலாவியிலும் செயல்படுத்தப்படவில்லை. ஒரு செயல்படுத்தல் கிடைக்கும்போது அதைச் சோதிக்க, இந்த சோதனை அம்சம் இயக்கப்பட்ட ஒரு உலாவி பில்ட் (எ.கா., ஒரு குறிப்பிட்ட அம்சக் கொடியுடன் கூடிய Chrome Canary) உங்களுக்குத் தேவைப்படும்.

படி 1: செயல்திறன்-முக்கியமான கூறுகளை அடையாளம் காணுதல்

மெதுவாக இருப்பதாக நீங்கள் சந்தேகிக்கிற அல்லது பயனர் அனுபவத்திற்கு முக்கியமான ஒரு கூறுகளை அடையாளம் காண்பதன் மூலம் தொடங்குங்கள். நல்ல வேட்பாளர்கள் பின்வருமாறு:

• ஊடாடும் வரைபடங்கள், தரவு கட்டங்கள் அல்லது வரைபடங்கள் போன்ற சிக்கலான, தரவு-அதிகம் கொண்ட கூறுகள்.
• ஒரு மெய்நிகர் பட்டியலில் உள்ள உருப்படிகள் போன்ற அடிக்கடி மறு-ரெண்டர் செய்யும் கூறுகள்.
• ஸ்லைடு-அவுட் வழிசெலுத்தல் மெனு அல்லது ஒரு மோடல் உரையாடல் போன்ற சிக்கலான அனிமேஷன்கள் அல்லது மாற்றங்களைக் கொண்ட UI கூறுகள்.
• Largest Contentful Paint (LCP)-ஐ பாதிக்கும் முக்கிய லேஅவுட் கூறுகள்.

நமது உதாரணத்திற்கு, தயாரிப்புப் படங்களின் ஒரு கட்டத்தைக் காட்டும் ஒரு <ProductGallery> கூறுகளைத் தேர்ந்தெடுப்போம்.

படி 2: @toggle மற்றும் @profile விதிகளை வரையறுத்தல்

உங்கள் ProductGallery கூறுடன் தொடர்புடைய CSS கோப்பில், தேவையான at-rules-ஐ நீங்கள் சேர்க்க வேண்டும்.

            
/* In ProductGallery.css */

.product-gallery {
  /* ... your component's regular styles ... */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

/* Define the performance instrumentation */

@toggle product-gallery-toggle {
  values: inactive, active;
  /* The toggle is active as long as the gallery exists */
  activate-at: .product-gallery;
}

@profile ProductGallery_FullRender {
  /* Tie the profile to our toggle */
  toggle-trigger: product-gallery-toggle;
}

            

              
                Copy
              
            
          

படி 3: அளவீட்டைத் தூண்டுதல்

உங்கள் ஜாவாஸ்கிரிப்டில் நீங்கள் கூடுதலாக எதுவும் செய்யத் தேவையில்லை! இது தான் அறிவிப்பு அணுகுமுறையின் அழகு. உங்கள் கட்டமைப்பு (React, Vue, போன்றவை) <div class="product-gallery">-ஐ DOM-இல் ரெண்டர் செய்யும் தருணத்தில், உலாவி அதைப் பார்த்து, product-gallery-toggle-ஐச் செயல்படுத்தி, தானாகவே `ProductGallery_FullRender` அளவீட்டைத் தொடங்கும்.

படி 4: DevTools-இல் முடிவுகளைப் பகுப்பாய்வு செய்தல்

இப்போது, உங்கள் பயன்பாட்டை ProductGallery ரெண்டர் செய்யும்படி பயன்படுத்துவீர்கள். பின்னர், உலாவியின் டெவலப்பர் கருவிகளைத் திறந்து ஒரு செயல்திறன் சுயவிவரத்தைப் பதிவு செய்வீர்கள்.

1. DevTools-ஐத் திறக்கவும் (F12 அல்லது Ctrl+Shift+I).
2. Performance தாவலுக்குச் செல்லவும்.
3. "Record" பொத்தானைக் கிளிக் செய்யவும் (அல்லது Ctrl+E).
4. உங்கள் பயன்பாட்டில் கேலரியை ரெண்டர் செய்யும் செயலைச் செய்யவும்.
5. பதிவை நிறுத்தவும்.

இதன் விளைவாக வரும் காலவரிசையில், நீங்கள் "Timings" அல்லது "User Timing" டிராக்கைத் தேடுவீர்கள். அங்கே, நீங்கள் ஒரு புதிய, தெளிவாக லேபிளிடப்பட்ட பட்டையைக் காண்பீர்கள்: `ProductGallery_FullRender`. இந்த பட்டையின் மீது சுட்டியை வைத்தால் அதன் துல்லியமான கால அளவை மில்லி விநாடிகளில் காண்பிக்கும். இந்த கால அளவு உங்கள் கூறுகளை ரெண்டர் செய்ய உலாவி செலவழித்த உண்மையான நேரத்தைக் குறிக்கிறது, ஆரம்ப அங்கீகாரம் முதல் இறுதி பெயிண்ட் வரை, ஒரு எளிய ஜாவாஸ்கிரிப்ட்-அடிப்படையிலான டைமரை விட மிகவும் துல்லியமான சித்திரத்தை வழங்குகிறது.

நடைமுறை பயன்பாட்டு வழக்குகள் மற்றும் எடுத்துக்காட்டுகள்

@profile-இன் உண்மையான சக்தி அதன் பன்முகத்தன்மையிலிருந்து வருகிறது. பொதுவான செயல்திறன் சிக்கல்களை அது எவ்வாறு தீர்க்க முடியும் என்பதைக் காட்டும் சில மேம்பட்ட பயன்பாட்டு வழக்குகளை ஆராய்வோம்.

பயன்பாட்டு வழக்கு 1: ஒரு CSS மறுசீரமைப்பை A/B சோதனை செய்தல்

காட்சி: உங்கள் கூறின் சிக்கலான, ஆழமாகப் பதிக்கப்பட்ட CSS செலக்டர்கள் மெதுவான ஸ்டைல் கணக்கீடுகளை ஏற்படுத்துகின்றன என்று நீங்கள் நம்புகிறீர்கள். நீங்கள் அதை ஒரு தட்டையான, BEM-பாணி கட்டமைப்பு அல்லது ஒரு யூட்டிலிட்டி-கிளாஸ் அணுகுமுறையைப் பயன்படுத்த மறுசீரமைத்துள்ளீர்கள். உங்கள் மாற்றங்கள் ஒரு வித்தியாசத்தை ஏற்படுத்தின என்பதை எப்படி நிரூபிப்பீர்கள்?

தீர்வு: உறுதியான தரவுகளைப் பெற நீங்கள் @profile-ஐப் பயன்படுத்தலாம். கூறின் இரண்டு பதிப்புகளை உருவாக்கவும் அல்லது பழைய மற்றும் புதிய ஸ்டைல்களுக்கு இடையில் மாற ஒரு அம்சக் கொடியைப் பயன்படுத்தவும்.

            
/* Version A (Old CSS) */
@profile OldComponent_Render {
  toggle-trigger: old-component-toggle;
}

/* Version B (New, Refactored CSS) */
@profile NewComponent_Render {
  toggle-trigger: new-component-toggle;
}

            

              
                Copy
              
            
          

ஒரே நிபந்தனைகளின் கீழ் இரண்டு பதிப்புகளுக்கும் செயல்திறன் தடங்களைப் பதிவு செய்வதன் மூலம், `OldComponent_Render` மற்றும் `NewComponent_Render`-இன் கால அளவுகளை நீங்கள் நேரடியாக ஒப்பிடலாம். "எங்கள் CSS மறுசீரமைப்பு கூறு ரெண்டர் நேரத்தில் 35% முன்னேற்றத்தை ஏற்படுத்தியது, 40ms-லிருந்து 26ms ஆகக் குறைந்தது" என்று நம்பிக்கையுடன் கூற இது உங்களை அனுமதிக்கிறது.

பயன்பாட்டு வழக்கு 2: ஒரு மெய்நிகர் பட்டியலில் உள்ள பட்டியல் உருப்படி ரெண்டரிங்கை சுயவிவரப்படுத்துதல்

காட்சி: உங்களிடம் தொடர்புகளின் ஒரு நீண்ட, ஸ்க்ரோல் செய்யக்கூடிய பட்டியல் உள்ளது. அதை செயல்திறனுடன் வைத்திருக்க, நீங்கள் மெய்நிகராக்கத்தைப் பயன்படுத்துகிறீர்கள் (தற்போது வியூபோர்ட்டில் உள்ள உருப்படிகளை மட்டுமே ரெண்டர் செய்தல்). இருப்பினும், ஸ்க்ரோலிங் இன்னும் ஜாங்கியானதாக அல்லது மெதுவாக உணர்கிறது.

தீர்வு: ஒரு ஒற்றை பட்டியல் உருப்படியின் ரெண்டரிங்கை சுயவிவரப்படுத்துங்கள். ஒவ்வொரு உருப்படியும் அதன் சொந்த கூறு என்பதால், நீங்கள் அதனுடன் ஒரு சுயவிவரத்தை இணைக்கலாம்.

            
@toggle contact-list-item-toggle {
  activate-at: .contact-list-item;
}

@profile ContactListItem_Render {
  toggle-trigger: contact-list-item-toggle;
}

            

              
                Copy
              
            
          

ஸ்க்ரோல் செய்யும்போது நீங்கள் ஒரு செயல்திறன் தடத்தைப் பதிவு செய்யும்போது, நீங்கள் ஒரு நீண்ட பட்டையை மட்டும் பார்க்க மாட்டீர்கள். அதற்கு பதிலாக, புதிய உருப்படிகள் DOM-இல் சேர்க்கப்படும்போது தோன்றும் சிறிய `ContactListItem_Render` பட்டைகளின் ஒரு தொடரைக் காண்பீர்கள். இந்த பட்டைகளில் சில மற்றவற்றை விட கணிசமாக நீளமாக இருந்தால், அல்லது அவை தொடர்ந்து ஒரு செயல்திறன் பட்ஜெட்டை (எ.கா., 60fps ஃபிரேமிற்குள் இருக்க 16ms) மீறினால், அது ஒரு சிக்கலைக் குறிக்கிறது. தாமதத்திற்குக் காரணம் என்ன என்பதைப் பார்க்க அந்த குறிப்பிட்ட இடைவெளிகளில் நீங்கள் ஃபிளேம் வரைபடத்தை ஆய்வு செய்யலாம்—ஒருவேளை அது ஒரு சிக்கலான box-shadow, ஒரு செலவுமிக்க `filter` பண்பு, அல்லது அதிகப்படியான குழந்தை கூறுகள் காரணமாக இருக்கலாம்.

பயன்பாட்டு வழக்கு 3: ஒரு புதிய அம்சத்தின் செயல்திறன் தாக்கத்தை அளவிடுதல்

காட்சி: உங்கள் குழு பயனர் அவதார்களில் ஒரு புதிய "பேட்ஜ்" அம்சத்தைச் சேர்க்கிறது, இதில் கூடுதல் கூறுகள் மற்றும் நிலைப்படுத்தல் மற்றும் ஸ்டைலிங்கிற்கான சாத்தியமான சிக்கலான CSS ஆகியவை அடங்கும்.

தீர்வு: அம்சத்தை செயல்படுத்துவதற்கு முன்னும் பின்னும், `UserAvatar` கூறின் ரெண்டர் நேரத்தை அளவிட @profile-ஐப் பயன்படுத்தவும். இது புதிய அம்சத்தின் செயல்திறன் "செலவை" அளவிட உதவுகிறது. ரெண்டர் நேரம் வியத்தகு रूपத்தில் அதிகரித்தால், அது பேட்ஜை செயல்படுத்த ஒரு அதிக செயல்திறன் மிக்க வழியைக் கண்டுபிடிக்க குழுவைத் தூண்டக்கூடும், அதாவது கூடுதல் `<div>`-க்கு பதிலாக ஒரு சூடோ-கூறைப் பயன்படுத்துவது போன்றவை.

தற்போதைய நிலை மற்றும் CSS @profile-இன் எதிர்காலம்

CSS @profile ஒரு சோதனை தொழில்நுட்பம் என்பதை மீண்டும் வலியுறுத்துவது அவசியம். இது W3C-இன் CSS Toggles Level 1 விவரக்குறிப்பின் ஒரு பகுதியாகும், இது தற்போது ஒரு வரைவு நிலையில் உள்ளது. இதன் பொருள்:

• உலாவி ஆதரவு இல்லை (இன்னும்): 2023-இன் பிற்பகுதியில், இது Chrome, Firefox, Safari, அல்லது Edge-இன் எந்த நிலையான பதிப்பிலும் ஆதரிக்கப்படவில்லை. செயல்பாடுகள் முதலில் இரவுநேர அல்லது கேனரி பில்டுகளில் சோதனை கொடிகளின் பின்னால் தோன்றக்கூடும்.
• தொடரியல் மாறலாம்: உலாவி விற்பனையாளர்கள் மற்றும் இணைய மேம்பாட்டு சமூகத்திடமிருந்து முன்மொழிவு கருத்துக்களைப் பெறும்போது, தொடரியல் மற்றும் நடத்தை செம்மைப்படுத்தப்படலாம்.

இந்த அற்புதமான அம்சத்தின் முன்னேற்றத்தை நீங்கள் இந்த ஆதாரங்களைக் கண்காணிப்பதன் மூலம் பின்பற்றலாம்:

• அதிகாரப்பூர்வ CSSWG Toggles Level 1 Specification Draft.
• CSSWG GitHub களஞ்சியத்தில் விவாதங்கள்.
• Chrome Platform Status மற்றும் Firefox Platform Status போன்ற உலாவி-குறிப்பிட்ட தள நிலை டிராக்கர்கள்.

இந்த தொழில்நுட்பத்திற்கான சாத்தியமான எதிர்காலம் நம்பமுடியாத அளவிற்கு பிரகாசமானது. ஒரு உலகை கற்பனை செய்து பாருங்கள்:

• தானியங்கு செயல்திறன் பின்னடைவு சோதனை: உங்கள் தொடர்ச்சியான ஒருங்கிணைப்பு (CI) பைப்லைன் தானாகவே செயல்திறன் சோதனைகளை இயக்கலாம், முக்கிய கூறுகளை அளவிட @profile-ஐப் பயன்படுத்தி. ஒரு மாற்றம் ஒரு கூறின் ரெண்டர் நேரத்தை ஒரு முன்வரையறுக்கப்பட்ட பட்ஜெட்டை மீறச் செய்தால் ஒரு பில்ட் தோல்வியடையக்கூடும்.
• கட்டமைப்பு ஒருங்கிணைப்பு: முன்-இறுதி கட்டமைப்புகள் @profile-க்கு முதல்-தர ஆதரவை வழங்கக்கூடும், இது எந்தவொரு கூறுக்கும் செயல்திறன் அளவீட்டைச் சேர்ப்பதை அற்பமானதாக ஆக்குகிறது.
• மேம்படுத்தப்பட்ட கண்காணிப்பு கருவிகள்: உண்மையான பயனர் கண்காணிப்பு (RUM) கருவிகள் களத்தில் உள்ள பயனர்களிடமிருந்து @profile தரவைச் சேகரிக்கலாம், இது வெவ்வேறு சாதனங்கள் மற்றும் நெட்வொர்க் நிலைகளில் உங்கள் கூறுகளின் நிஜ-உலக ரெண்டரிங் செயல்திறன் பற்றிய முன்னோடியில்லாத நுண்ணறிவை உங்களுக்கு வழங்குகிறது.

முடிவு: அறிவிப்பு செயல்திறன் கண்காணிப்புக்கான ஒரு புதிய சகாப்தம்

CSS @profile முன்-இறுதி செயல்திறன் பகுப்பாய்வில் ஒரு குறிப்பிடத்தக்க முன்னுதாரண மாற்றத்தைக் குறிக்கிறது. இது கருவியாக்கத்தை நமது ஜாவாஸ்கிரிப்டிலிருந்து நமது CSS-க்கு நகர்த்துகிறது, உலாவியின் ரெண்டரிங் வேலைக்கு மிகவும் நேரடியாகப் பொறுப்பான குறியீட்டிற்கு அடுத்ததாக அதை வைக்கிறது. இது செயல்திறன் சுயவிவரத்தை ஜனநாயகப்படுத்துவதாக உறுதியளிக்கிறது, செயல்திறன் நிபுணர்களுக்கு மட்டுமல்ல, அனைத்து முன்-இறுதி டெவலப்பர்களுக்கும் அதை மேலும் அணுகக்கூடியதாகவும் உள்ளுணர்வுடனும் ஆக்குகிறது.

நமது UI கூறுகளின் உண்மையான ரெண்டர் செலவை அளவிடுவதற்கான ஒரு அறிவிப்பு, கூறு-சார்ந்த, மற்றும் குறைந்த-மேல்நிலை வழியை வழங்குவதன் மூலம், @profile நமது தற்போதைய கருவித்தொகுதியில் ஒரு முக்கியமான இடைவெளியை நிரப்புகிறது. இது DevTools செயல்திறன் பேனலின் சக்தி மற்றும் ஜாவாஸ்கிரிப்ட் செயல்திறன் API-இன் நெகிழ்வுத்தன்மையை மிகவும் பொதுவான செயல்திறன் கேள்விகளில் ஒன்றிற்கு பதிலளிப்பதற்கான ஒரு கவனம் செலுத்திய, பயன்படுத்த எளிதான வழிமுறையுடன் பூர்த்தி செய்கிறது: "இந்த குறிப்பிட்ட விஷயம் திரையில் தோன்ற எவ்வளவு நேரம் எடுத்தது?"

உலாவிகள் இந்த விவரக்குறிப்பை செயல்படுத்த நாம் காத்திருக்க வேண்டியிருந்தாலும், அதைப் பற்றி சிந்திக்கத் தொடங்கும் நேரம் இது. அதன் நோக்கத்தையும் திறனையும் புரிந்துகொள்வதன் மூலம், இந்த சக்திவாய்ந்த புதிய கருவியைத் தழுவி, உலகெங்கிலும் உள்ள பயனர்கள் தகுதியான வேகமான, மென்மையான, மற்றும் அதிக மகிழ்ச்சியான இணைய அனுபவங்களை உருவாக்க நாம் தயாராக இருக்க முடியும்.